var stage = null;
var layer = null;
var width_default = 320;
var height_default = 250
$(function() {
	setSizeScreen($(window).width(), $(window).height());
	setTimeout(function() {
		runGames();
	}, 500);
	$(window).resize(function() {
		setSizeScreen($(window).width(), $(window).height());
	});
})

function setSizeScreen(width, height) {
	$('#div_screen').width(width);
	$('#div_screen').height(height);
    if (stage!= null)
    {
        stage.setWidth(width);
        stage.setHeight(height);
        stage.draw();
    }
    if (layer != null)
    {
        layer.setScaleX(width / width_default);
        layer.setScaleY(height / height_default);
        stage.draw();
    }
}

function runGames() {
    if (layer != null)
        layer.remove();
    if (stage != null)
        stage.remove();
        
	stage = new Kinetic.Stage({
		container: 'div_screen',
		width: $('#div_screen').width(),
		height: $('#div_screen').height(),
	});
	layer = new Kinetic.Layer();
    layer.setScaleX($('#div_screen').width() / width_default);
    layer.setScaleY($('#div_screen').height() / height_default);
	stage.add(layer);
	//screen
	var screen = new Kinetic.Image({
		id: "screen",
		x: 0,
		y: 0,
		image: $('#image_screen')[0],
		width: width_default,
		height: height_default,
	});
	layer.add(screen);
	//btn play
	var btnPlay = new Kinetic.Image({
		id: "btnPlay",
		x: 20,
		y: 10,
		image: $('#image_btnplay')[0],
		width: 289,
		height: 88,
	});
	btnPlay.on('mousedown touchstart', function() {
		playGames();
	});
	layer.add(btnPlay);
	//drawing
	stage.draw();
}

function playGames() {
	layer.removeChildren();
	//screen
	var screen = new Kinetic.Image({
		id: "screen",
		x: 0,
		y: 0,
		image: $('#image_screen2')[0],
		width: 320,
		height: 250,
	});
	screen.on('mousedown touchstart', function() {
	   this.setImage($('#image_screen_play')[0]);
	   addedPoint();
        this.listening(false);
        setTimeout(function(){
		  showMouse();
          stopMouse();
		}, 300);
	});
	layer.add(screen);
	stage.draw();
}
function endGames()
{
    layer.find('#screen')[0].setImage($('#image_screen_end')[0]);
    
    var text = new Kinetic.Text({
        id: "score",
        x: 170,
        y: 95,
        text: 'Score',
        fontSize: 40,
        fontStyle: "bold",
        padding: 5,
        rotation: -6,
        stroke: "#843c01",
        strokeWidth: 2,
        fill: 'white'
    });
    layer.add(text); 
    
    var play_agian = new Kinetic.Text({
        id: "play_agian",
        x: 0,
        y: 48,
        text: 'Play again!',
        
        fontSize: 30,
        fontStyle: "bold",
        padding: 5,
        rotation: -18,
        stroke: "#733111",
        strokeWidth: 1,
        fill: 'white'
    });
    play_agian.on('mousedown touchstart', function() {
   	    runGames();
	});
    layer.add(play_agian); 
    
    layer.find('#ic_mouse')[0].setX(150);
    layer.find('#ic_mouse')[0].setY(140);
    layer.find('#ic_mouse')[0].setWidth(50)
    layer.find('#ic_mouse')[0].setHeight(38)
    
    layer.find('#count_mouse')[0].setX(225);
    layer.find('#count_mouse')[0].setY(145);
    layer.find('#count_mouse')[0].setFontSize(30);
    
    
    layer.find('#miss_mouse')[0].setX(183);
    layer.find('#miss_mouse')[0].setY(190);
    layer.find('#miss_mouse')[0].setFontSize(30);
    
    layer.find('#miss_mouse')[0].rotation(2);
    
    
}

var arrayXY = new Array();
arrayXY.push({x:'50', y:'55', show: false});
arrayXY.push({x:'130', y:'55', show: false});
arrayXY.push({x:'210', y:'55', show: false});

arrayXY.push({x:'35', y:'105', show: false});
arrayXY.push({x:'130', y:'105', show: false});
arrayXY.push({x:'225', y:'105', show: false});

arrayXY.push({x:'18', y:'155', show: false});
arrayXY.push({x:'130', y:'155', show: false});
arrayXY.push({x:'245', y:'155', show: false});

function addedPoint()
{
    //screen
	var screen = new Kinetic.Image({
		id: "ic_mouse",
		x: 0,
		y: 0,
		image: $('#ic_mouse')[0],
		width: 30,
		height: 18,
	});
    layer.add(screen);
    
    var text = new Kinetic.Text({
        id: "count_mouse",
        x: 30,
        y: -4,
        text: '0',
        fontFamily: 'Calibri',
        fontSize: 18,
        fontStyle: "bold",
        padding: 5,
        fill: 'white'
      });
    layer.add(text);  
    
    var miss_text = new Kinetic.Text({
        id: "miss_mouse",
        name: 0,
        x: 250,
        y: -4,
        text: 'Miss: 0',
        fontFamily: 'Calibri',
        fontSize: 18,
        fontStyle: "bold",
        padding: 5,
        fill: 'white'
      });
    layer.add(miss_text);  
    
}

function stopMouse()
{
    //random show mouse
    var r = Math.floor((Math.random()*1000)+1);
    setTimeout(function(){
        var r2 = Math.floor((Math.random()*9)+1); 
        r2--;
        if (layer.find('#mouse_'+r2).length != 0)
        {
            layer.find('#mouse_'+r2)[0].remove();
            arrayXY[r2].show = false;
            var miss_mouse = layer.find('#miss_mouse')[0];
            var count = Number(miss_mouse.getName()) + 1;
            miss_mouse.setName(count);
            miss_mouse.setText("Miss: " + count);
        }
        if (!f_checkLose())
            stopMouse();    
        else
            f_removeMouse();
	}, r);
}
function showMouse() {
    if (f_checkLose())
    {
        f_removeMouse();
        return;
    }
    //random show mouse
    var r = Math.floor((Math.random()*2000)+1);
    setTimeout(function(){
		  showMouse();
	}, r);
    
    //get XY
    var r = Math.floor((Math.random()*9)+1); 
    r--;
    if (layer.find('#mouse_'+r).length != 0)
        return;
    
    arrayXY[r].show = true;
	var blob = new Kinetic.Sprite({
        name: r,
        id: 'mouse_' + r,
		x: arrayXY[r].x,
		y: arrayXY[r].y,
		image: $('#sprite_mouse')[0],
		animation: 'idle',
		animations: {
			idle: [
			// x, y, width, height (4 frames)
			0, 0, 59, 59, 
            59, 0, 59, 59, 
            118, 0, 59, 59, ],
			boom: [
			// x, y, width, height (4 frames)
			177, 0, 59, 59, 
            236, 0, 59, 59,
            295, 0, 59, 59,  
            ]
		},
		frameRate: 7,
		frameIndex: 0
	});
	// add the shape to the layer
	layer.add(blob);
	
	// start sprite animation
	blob.start();
    
   	blob.on('mousedown touchstart', function() {
   	   this.animation('boom');
	});
 
   
	var frameCount = 0;
	blob.on('frameIndexChange', function(evt) {
		if (this.animation() === 'boom' && ++frameCount > 4) {
			this.animation('idle');
			frameCount = 0;
            
            var count_mouse = layer.find('#count_mouse')[0];
            var count = Number(count_mouse.getText()) + 1;
            count_mouse.setText(count);
            var r= this.getName();
            arrayXY[r].show = false;
    		this.remove();
		}
	});
}

function f_checkLose()
{
    var miss_mouse = layer.find('#miss_mouse')[0];
    if(Number(miss_mouse.getName()) >= 3)
    {
        setTimeout(function(){
            endGames();    
        }, 2000);
        return true;
    }        
    for(var i=0; i<arrayXY.length; i++)
        if (arrayXY[i].show == false)
            return false;
    setTimeout(function(){
        endGames();    
    }, 2000);
    
    return true;
}

function f_removeMouse()
{
    for(var i=0; i<arrayXY.length; i++)
        if (layer.find('#mouse_' + i).length != 0)
            layer.find('#mouse_' + i)[0].remove();
}
